<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏蓉</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            margin:0 auto;
            background: #eaeaee;
            height:650px;
        }
        

        /* 导航栏1  nav */
        .nav{
            width: 95%;
            font-size: 14px;
            line-height: 65px;
            margin: 0px auto;
            color: #fff;
            border-radius:8px;
            overflow: hidden;
            margin-top: 10px;
        }

        .nav-hang{
            background: linear-gradient(to right,#fa5956,#fb8650 54%);
            width: 100%;
            display: flex;
            box-sizing:border-box;
            border-bottom: 1px solid #f2f2f2;
            color: #fff;
        }


        .nav-hang div:nth-child(1){
            width:31%;
            background-position: right bottom;
            background-size: 73px auto;
            background-image: url(./images/酒店.png) ;
            background-repeat: no-repeat;
            /* border-right:1px solid white; */
        }

        .a{
            width:31%;
            height:65px;
           
        }
        .span1{
            padding-left:10px;
        }
        .span2{
            display:block;
            text-align: center;
        }


        .nav-hang div:nth-child(2){
            /* border-right:1px solid white; */
            height: 65px;
            background-position: left bottom;
            width:23%;
            background-size: 37px auto;
            background-image: url(./images/民宿客栈.png);
            background-repeat: no-repeat;
        }

        .nav-hang div:nth-child(3){
            height: 65px;
            flex: 1;
            background: linear-gradient(to right,#ffbc49,#ffd252);

        }


        .xr{
            width: 100%;
            height: 100%;
            display: block;
            background-size: 100% auto;
            background-image: url(./images/特价爆款.png);
            background-repeat: no-repeat;
            color: #a05416;

        }
        .lh{
            box-sizing: border-box;
            border-left: 1px solid #f2f2f2;
        }

        .nav-hang2{
            border-bottom: 1px solid #f2f2f2;
            box-sizing: border-box;
            display: flex;
             background: linear-gradient(to right,#4b8fed,#53bced);
        }
        .nav-hang2 div:nth-child(1),.nav-hang3 div:nth-child(1){
            height: 65px;
            
            background-position: right bottom;
            background-repeat: no-repeat;
            /* border-right:1px solid white; */
        }
        .img1{
            width:31%;
            background-size: 79px auto;
            background-image: url(./images/机票.png);
        }
        .img3{
            width:31%;
            background-size: 94px auto;
            background-image: url(./images/火车票背景.png);
        }
        .nav-hang2 div:nth-child(2),.nav-hang3 div:nth-child(2){
            height: 65px;
            background-position: left bottom;
            width: 23%;
            /* border-right:1px solid white; */
            background-repeat: no-repeat;
        }
        .img2{
            background-size: 37px auto;
            background-image: url(./images/旅游.png);
        }
        .img4{
            background-size: 61px auto;
            background-image: url(./images/私家团.png);
        }

        .nav-hang2 div:nth-child(3),.nav-hang3 div:nth-child(3){
            height: 65px;
            background-position: left bottom;
            width: 23%;
            background-size: 37px auto;
        }
        .nav-hang2 div:nth-child(4),.nav-hang3 div:nth-child(4){
            height: 65px;
            background-position: left bottom;
             width: 23%;
            background-size: 37px auto;
        }
        .nav-hang3{
            display:flex;
            background: linear-gradient(to right,#34c2aa,#6cd557);
            }





/* 导航栏---nav2 */

            .nav2{
                width:95%;
                height:110.06px;
                display:flex;
                flex-wrap:wrap;
                margin-top:10px;
            }

            .nav2 li{
                flex:20%;
                list-style:none;
            }

            .nav2 li a{
                display:flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                font-size:12px;
                color:black;
            }

            .nav2 .nav-icon{
                width:28px;
                height:28px;
                display:block;
                background:url('./images/精灵图.png') no-repeat;
                background-size:28px;
                
            }

            .nav2 .a{
                background-position:0 -28px;
            }
            .nav2 .b{
                background-position:0 -56px;
            }
            .nav2 .c{
                background-position:0 -84px;
            }
            .nav2 .d{
                background-position:0 -112px;
            }
            .nav2 .e{
                background-position:0 -140px;
            }
            .nav2 .f{
                background-position:0 -168px;
            }
            .nav2 .g{
                background-position:0 -196px;
            }
            .nav2 .h{
                background-position:0 -224px;
            }
            .nav2 .i{
                background-position:0 -252px;
            }


/* 下方盒子  footer */
            .footer{
                width: 100%;
                height:61px;
                border-top:1px solid rgb(219, 213, 213);
                background-color:#fff;
                display: flex;
                margin-top:10px;
                /* position:absolute;
                bottom:0; */
            }

            .footer a{
                flex:1;
                display: flex;
                flex-direction: column;
                text-decoration: none;
                align-items: center;
                justify-content: center;
                color: #333;
                font-size:14px;
            }

            /* .footer a span:nth-child(1){
                width:40px;
                height:40px;
            } */


            /* 上方的大图片 */
            #top{
                position:fixed;
                width: 100%;
                height: 64px;
                background: linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,0));
            }

            #top-img img{
                height:199px;
                width:100%;
                border-bottom-left-radius:20px;
                border-bottom-right-radius:20px;
            } 



            /* 搜索栏 */
            .research{
                margin-top:3px;
                width: 100%;
                position:fixed;
                display: flex;
                z-index: 10;
                align-items: center;
            }
            .xl{
                background-image: url(./images/我的.png);
                background-repeat: no-repeat;
                background-position: 15px 7px;
                background-size: 21px auto;
                width: 35px;
                height: 100%;
            }
            .sousuo{
                height: 28px;
                display: flex;
                border: 1px solid #fff;
                background-color: #fff;
                margin-left: 12px;
                border-radius: 20px;
                flex: 1;
            }
            .sousuo input{
                flex: 1 ;
                border:0;
                outline: none;
                margin-right: 10px;
                
            }
            .dl{
                font-size: 10px;
                color: #fff;
                width: 51px;
                height: 44px;
                text-align: center;
            }
            .xl2{
                background-image: url(./images/我的.png);
                width: 23px;
                height: 23px;
                margin: 0 auto;
                background-position: 1px -36px;
                background-repeat: no-repeat;
                background-size: 21px auto;
                margin-bottom: 3px;
            }




/* 搜索栏下方导航栏 */

            .navv{
                width:95%;
                /* height:110.06px; */
                display:flex;
                flex-wrap:wrap;
                position:absolute;
                top:150px;
                background-color: white;
                margin-left:10px;
                border-radius: 10px;
            }

            .navv li{
                flex:20%;
                list-style:none;
            }

            .navv li a{
                display:flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                font-size:12px;
                color:black;
            }

            .navv .imgs{
                width:40px;
                height:40px;
                display:block;
                background:url(./images/精灵图1.png) no-repeat;
                background-size:40px;
            }

            .navv .bn{
                background-position:0 -40px;
            }
            .navv .cn{
                background-position:0 -80px;
            }
            .navv .dn{
                background-position:0 -120px;
            }
            .navv .en{
                background-position:0 -160px;
            }
          



        /* 最底部 */
        .bottom-a{
            width:95%;
            

        }




    </style>
</head>
<body>
 <!-- 上方搜索框 -->
 <div class="research">
    <div class="sousuo">
      <div class="xl"></div>
        <input type="text" placeholder="搜索:目的地/酒店/景点/航班号">
    </div>

    <div class="dl">
      <div class="xl2"></div>
        <div>我 的</div>
    </div>
  </div>


  <!-- 搜索栏下方导航条 -->
    <ul class="navv">
        <li>
            <a href="javascript:,">
                <span class="imgs an"></span>
                <span class="words">攻略·景点</span>
            </a>
        </li>

        <li><a href="javascript:,"><span class="imgs bn"></span><span class="words">门票·活动</span></a></li>
        <li><a href="javascript:,"><span class="imgs cn"></span><span class="words">美食林</span></a></li>
        <li><a href="javascript:,"><span class="imgs dn"></span><span class="words">周边游</span></a></li>
        <li><a href="javascript:,"><span class="imgs en"></span><span class="words">一日游</span></a></li>
    </ul>


    <!-- 背景图 -->
        <div id="top"></div>
            <div id="top-img">
        <img src="./images/top.jpg">
        </div>
   

    <!-- 导航栏1  nav -->
        <div class="nav">
        <div class="nav-hang">
          <div class="a"><span class="span1">酒店</span></div>
          <div class="lh"><span class="span2">民宿·客栈</span></div>
          <div class="lh"><span class="xr"><span class="span2">特价·爆款</span></span></div>
        </div>
        <div class="nav-hang2">
          <div class="img1"><span class="span1">机票</span></div>
          <div class="lh img2"><span class="span2">火车票</span></div>
          <div class="lh"><span class="span2">汽车·船票</span></div>
          <div class="lh"><span class="span2">专车·租车</span></div>
        </div>
        <div class="nav-hang3">
          <div class="img3"><span class="span1">旅游</span></div>
          <div class="lh img4"><span class="span2">私家团</span></div>
          <div class="lh"><span class="span2">邮轮游</span></div>
          <div class="lh"><span class="span2">定制游</span></div>
        </div>
        </div>


     <!-- 导航栏2  nav2 -->
        <ul  class="nav2">
             <li>
                 <a href="javascript:,">
                     <span class="nav-icon"></span>
                     <span>自由行</span>
                </a>
            </li>
           
             <li><a href="javascript:,"><span class="nav-icon a"></span><span class="content">自由行</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon b"></span><span class="content">WiFi电话卡</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon c"></span><span class="content">保险·签证</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon d"></span><span class="content">换钞票</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon e "></span><span class="content">向导·包车</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon f"></span><span class="content">特价机票</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon g"></span><span class="content">礼品卡</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon h"></span><span class="content">社区</span></a></li>
             <li><a href="javascript:,"><span class="nav-icon i"></span><span class="content">更多</span></a></li> 

            </ul>


    <!-- 下方盒子  footer -->
        <div class="footer">
                <a href="javascript:,">
                    <span class="iconfont icon-dianhua"></span>
                    <span>电话预定</span>
                </a>

                <a href="javascript:,">
                    <span class="iconfont icon-xiazai"></span>
                    <span>下载客户端</span>
                </a>

                <a href="javascript:,">
                    <span class="iconfont icon-biaoqianA01_wode-70"></span>
                    <span>我的</span>
                </a>
            </div>
       

            <!-- 最底部 -->
            <!-- <div class="bottom">
                <div class="bottom-a">
                    <a href="javascript:,">网站地图</a>|
                    

                    <a href="javascript:,">
                        <span class="logo"></span>
                        Language
                        <span class="xia"></span>
                        "|"
                    </a>

                    <a href="javascript:,">电脑版</a>
                </div>


                <p>
                    "@"
                    <lable class="same to up">2021</lable>
                    "携程旅行 |"
                    <a href="javascript:,">沪ICP备08023580号</a>
                </p>
            </div>
     -->
</body>
</html>